<template>
    <rx-dialog @ok="handleSubmit" @cancel="cancel">
        <rx-layout>
            <template #middle>
                <a-form ref="form" :model="mdl" :rules="rules" class="rx-a-form-vertical" layout="vertical">
                    <a-form-item style="display: none">
                        <a-input v-model:value="mdl.id"/>
                    </a-form-item>
                    <a-row>
                        <a-col :span="24">
                            <a-form-item :label="$ti18('rxList.title', '标题')" name="msgTitle">
                                <a-input v-model:value="mdl.msgTitle" :placeholder="$ti18('rxList.title', '标题')"
                                         :rows="4" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-item :label="i18n('form.addressee','收信人')" name="recUserId">
                                <RxUserComponent :single="false" v-model="users"
                                                 :placeholder="i18n('form.addressee','收信人')"
                                                 :rows="4"></RxUserComponent>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-item :label="i18n('form.reSection','收信组')" name="groupId">
                                <RxGroupComponent :single="false" v-model="groups"
                                                  :placeholder="i18n('form.reSection','收信组')"
                                                  :rows="4"></RxGroupComponent>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-item :label="i18n('form.msgContent','消息内容')" name="content">
                                <a-textarea :placeholder="i18n('form.msgContent','消息内容')" v-model:value="mdl.content"
                                            :rows="7"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </template>
        </rx-layout>
    </rx-dialog>
</template>
<script>
    import InfInnerMsgApi from '@/common/api/portal/infInnerMsg'
    import {BaseFormModel, RxDialog} from '@lowcode/jpaas-base-lib';
    import {RxUserComponent,RxGroupComponent} from '@lowcode/jpaas-share-component';

    export default {
        name: 'InfInnerMsgEdit',
        mixins: [BaseFormModel],
        components: {
            RxDialog,
            RxUserComponent,
            RxGroupComponent
        },
        data() {
            return {
                rules: {
                    content: [{
                        required: true,
                        message: this.i18n('form.msgContent', '消息内容', 'input'),
                        trigger: 'change'
                    }],
                    msgTitle: [{
                        required: true,
                        message: this.$ti18('rxList.title', '标题', '', 'input'),
                        trigger: 'change'
                    }],
                },
                mdl: {
                    recUserId: "",
                    fullName: "",
                    groupId: "",
                    groupName: "",
                    content: "",
                    msgTitle: ""
                },
                users: [],
                groups: []
            }
        },
        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "infInbox", key);
            },
            get(id) {
                return InfInnerMsgApi.get(id);
            },
            save(values) {
                return InfInnerMsgApi.sendMsg(values);
            },
        },
        watch: {
            users: function (val, oldVal) {
                var userIds = [];
                var userNames = [];
                if (val) {
                    for (var i = 0; i < val.length; i++) {
                        userIds.push(val[i].id);
                        userNames.push(val[i].name);
                    }
                    this.mdl.recUserId = userIds.join(",");
                    this.mdl.fullName = userNames.join(",");
                }
            },
            groups: function (val, oldVal) {
                var groupIds = [];
                var groupNames = [];
                if (val) {
                    for (var i = 0; i < val.length; i++) {
                        groupIds.push(val[i].id);
                        groupNames.push(val[i].name);
                    }
                    this.mdl.groupId = groupIds.join(",");
                    this.mdl.groupName = groupNames.join(",");
                }
            }
        }
    }
</script>
